<template>
  <div>
    <el-tabs v-model="activeCollect" class="my-favor" @tab-click="handleClick">
      <el-tab-pane
        :label="itemTabs.title"
        :name="itemTabs.key"
        v-for="itemTabs in collectionArr"
        :key="itemTabs.key"
      >
      </el-tab-pane>

      <div>
        <el-row>
          <el-col :span="6" v-for="item in CollectList" :key="item.id">
            <a href="javascript:void(0)">
              <div class="image-group">
                <el-image :src="item.image"></el-image>
                <el-button icon="el-icon-close" @click="remove(item)">
                  移除
                </el-button>
              </div>
              <div>
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="label-count">
                  <div class="money">
                    ￥
                    <span>{{ item.price }}.00</span>
                  </div>
                  <button>购买</button>
                </div>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>
    </el-tabs>
  </div>
</template>

<script>
import { getCollectionType, getCollectionList } from '@/api/homes_tabs'

export default {
  name: 'myShouCang',
  data() {
    return {
      activeCollect: '',
      collectionArr: [],
      CollectList: []
    }
  },
  created() {
    this.CollectionType()
  },
  methods: {
    async CollectionType() {
      let { data: data } = await getCollectionType()
      if (data.code == 1) {
        this.collectionArr = Object.entries(data.data).map(([key, value]) => ({
          key: key,
          title: value
        }))
        this.activeCollect = this.collectionArr[0].key
        this.CollectionList(this.collectionArr[0].key)
      } else {
        console.error(data.msg)
      }
    },
    CollectionList(typeId) {
      getCollectionList({ page: 1, type_id: typeId }).then(({ data: data }) => {
        this.CollectList = data.data.list
      })
    },
    remove(item) {
      console.log(item)
      this.CollectionList(item.id)
    },
    handleClick(tab) {
      console.log(tab.name)
      this.CollectionList(tab.name)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-tabs__item.is-active {
  font-weight: bold;
  color: #2c8eff !important;
}

.title {
  padding-top: 20px;
  padding-bottom: 16px;
  padding-left: 8px;
  font-size: 18px;
  color: #282828;
}

.my-favor {
  ::v-deep {
    .el-tabs__header {
      padding: 0;
      margin-bottom: 0;
    }
    .el-tabs__content {
      padding: 20px;
    }
    &.el-tabs.el-tabs--top {
      margin-top: 0;
    }
    .el-tabs__item {
      height: 60px;
      padding: 0 25px;
      line-height: 60px;
      color: #999;
    }
  }

  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }
  .el-col-6 {
    padding: 0 7px;
  }

  .image-group {
    position: relative;

    .el-button {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      padding: 5px;
      border: 0;
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      color: #ffffff;
      opacity: 0;
    }
  }
  .el-row {
    a {
      box-shadow: 0 2px 16px rgb(79 109 143 / 12%);
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;

      .el-image:first-child {
        display: block;
        width: 100%;
        height: 146px;
      }

      .image-group + div {
        padding: 0 15px;
      }

      .el-image:nth-child(2) {
        position: absolute;
        right: 7px;
        bottom: 7px;
        z-index: 2;
        width: 10px;
        height: 10px;
        padding: 5px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }

  .el-row a:hover .image-group .el-button {
    opacity: 1;
  }

  .label-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    font-size: 14px;
    color: #999;

    button {
      padding: 4px 20px;
      border-radius: 16px;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
      margin-left: 10px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      border: none;
    }

    .money {
      font-size: 14px;
      color: #ff6b00;

      span {
        font-size: 18px;
      }
    }
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }

  .head_t {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-weight: bold;
    font-size: 24px;
    color: #333;
    padding-left: 8px;

    div {
      span {
        margin-left: 10px;
        font-weight: normal;
        font-size: 16px;
        color: #999;
      }
    }
  }
  .el-link.el-link--default:hover {
    color: #606266;
  }
}
</style>
